#tag layout_block("headContent")
<!-- daterange picker -->
<link href="resources/plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
<!-- daterangepicker -->
<script src="resources/plugins/daterangepicker/moment.min.js" type="text/javascript"></script>
<script src="resources/plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script>
<!-- Bootstrap time Picker -->
<script src="resources/plugins/highcharts/highcharts.js" type="text/javascript"></script>
<script src="resources/plugins/highcharts/exporting.js" type="text/javascript"></script>
<script src="resources/plugins/highcharts/dark-unica.js" type="text/javascript"></script>
<script src="resources/scripts/service/charts.js" type="text/javascript"></script>
#end

#tag layout_block("mainContent")
<section class="content-header">
  <h1>
    Charts
    <small>overview</small>
  </h1>
  <ol class="breadcrumb">
    <li><a href=""><i class="fa fa-home"></i> Home</a></li>
    <li><a href="services"><i class="fa fa-connectdevelop"></i> Services</a></li>
    <li>${service}</li>
    <li class="active">Charts</li>
  </ol>
</section>

<!-- Main content -->
<section class="content">

  <div class="row margin-bottom">
    <div class="col-xs-12">
      <input type="text" hidden="hidden" id="invokeSearchService" name="invokeSearchService" value="${service}"/>
      <input type="text" hidden="hidden" id="invokeDateFrom" name="invokeDateFrom"/>
      <input type="text" hidden="hidden" id="invokeDateTo" name="invokeDateTo"/>
      <button class="btn btn-default pull-right" id="searchDateRange">
        <i class="fa fa-calendar"></i>
        <span>Date range picker</span>
        <i class="fa fa-caret-down"></i>
      </button>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12">
      #for (row : rows)
      <div class="box box-primary">
        <div class="box-header">
          <h3 class="box-title">${row} <small>method of service</small></h3>
        </div>

        <div class="box box-solid">
          <div class="row">
            <div class="col-lg-6">
              <div id="QPS-${row}" class="box-body"></div>
            </div>
            <div class="col-lg-6">
              <div id="ART-${row}" class="box-body"></div>
            </div>
          </div>
        </div>

      </div>
      #end
    </div>
  </div>
</section>
#end

#include ("../common/main_layout.html")